<template>
<div class="hotcity-data">
	<p class="hotcity-name">{{hotCity_Data[0].city}}</p>
	<p class="hotcity-introduce">{{hotCity_Data[0].introduce}}</p>
	<div class="hotcity-data-back">
		<van-swipe :loop="false" :width="swiperWidthPx" :show-indicators="false">
		  <van-swipe-item  v-for="(item,index) in hotCityTravels" :key="index">
			<div class="hotcity-data-swiper" @click="juMp(item._id)">
				<img class="hotcity-data-cover" :src="item.cover_image.url">
				<div class="hotcity-data-position global-display global-f-direction">
					<div class="hotcity-data-address global-display global-a-items">
						<img src="@/icon/search/search-address.png" alt="">
						<p>{{item.address}}</p>
					</div>
					<div class="hotcity-data-title"><p class="text-show">{{item.title}}</p></div>
					<div class="hotcity-data-user global-display global-a-items">
						<img :src="item.author_data[0].avatarUrl" alt="">
						<p>{{item.author_data[0].nickname}}</p>
						<p>-</p>
						<p>{{item.likes}}赞</p>
					</div>
				</div>
			</div>
		  </van-swipe-item>
		</van-swipe>
	</div>
</div>
</template>

<script setup>
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	const props = defineProps({
		hotCity_Data: {type:Array,required:true},
		hotCityTravels:{type:Array,required:true},
		swiperWidthPx:{type:Number,required:true}
	})
	// 跳转路由
	function juMp(_id){
		$router.push({path: '/details-page', query: {_id}})
	}
</script>

<style scoped>
/* 热门城市 */
.hotcity-data{
	padding: 10px;
	background: linear-gradient(to bottom,rgba(233, 89, 60, 1) 10%, rgba(238, 136, 94, 0.2) 70%);
}
.hotcity-name{
	font-size: 20px;
	font-weight: bold;
	color: #ffffff;
}
.hotcity-introduce{
	padding: 10px 0;
	color: #ffffff;
}
.hotcity-data-back{
	background-color: #ffffff;
	border-radius: 4px;
	padding: 5px 0 5px 5px;
}

.hotcity-data-swiper{
	height: 350px;
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	margin-right: 5px;
}
.hotcity-data-cover{
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}
.hotcity-data-position{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 0 7px 7px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
	/* box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.8); */
}
.hotcity-data-position p{
	color: #ffffff;
	font-size: 12px;
}
.hotcity-data-position img{
	width: 15px;
	height: 15px;
}
.hotcity-data-address{
	background-color: rgba(0,0,0,0.4);
	border-radius: 4px;
	align-self:baseline;
	padding: 3px;
}
.hotcity-data-address p{
	padding-left: 3px;
}
.hotcity-data-title{
	padding: 5px 5px 5px 0;
}
.hotcity-data-title p{
	font-size: 15px !important;
}
.hotcity-data-user img{
	border-radius: 50%;
}
.hotcity-data-user p:nth-child(2){
	padding-left: 5px;
}
.hotcity-data-user p:nth-child(3){
	padding: 0 5px;
}
</style>